<template>
  <div class="container" v-loading="loading">
    <el-form :model="detailsForm" :rules="rules" ref="detailsForm">
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="仓库编码" prop="code">
            <el-input
              v-model="detailsForm.code"
              placeholder="请输入"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仓库名称" prop="name">
            <el-input
              v-model="detailsForm.name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仓库类型" prop="type">
            <el-select
              v-model="detailsForm.type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in wareType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="省/市/区" prop="location">
            <el-cascader
              v-model="detailsForm.location"
              :options="options"
              style="width: 100%"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="详细地址" prop="address">
            <el-input
              v-model="detailsForm.address"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仓库状态" prop="status">
            <el-radio-group v-model="detailsForm.status" style="width: 100%">
              <el-radio label="1">启用</el-radio>
              <el-radio label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="仓库面积" prop="surface">
            <el-input v-model="detailsForm.surface" placeholder="请输入">
              <template slot="append">m³</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责人" prop="personName">
            <el-input
              v-model="detailsForm.personName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="detailsForm.phone"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <div class="labelbutton">
          <button
            class="penpel resetbutton"
            @click="$router.push('/manageinfo/warehouse')"
          >
            返回
          </button>
          <button class="penpel searchbutton" @click="addWareHouse">
            确认
          </button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getCK, addWare, searchWare, updataWare } from '@/api/warehouse'
import { regionData, CodeToText } from 'element-china-area-data'
import EmunList from '@/constant/warehouse'

const rules = {
  name: [{ required: true, message: '请输入仓库名称', trigger: ['blur'] }],
  type: [{ required: true, message: '请选中仓库类型', trigger: ['blur'] }],
  location: [
    { required: true, message: '请选中省市区', trigger: ['blur', 'change'] }
  ],
  status: [{ required: true, message: '请选择仓库状态', trigger: ['blur'] }],
  personName: [{ required: true, message: '请输入负责人', trigger: ['blur'] }],
  phone: [
    {
      pattern:
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      message: '请输入正确格式的手机号',
      trigger: ['blur']
    }
  ]
}
export default {
  name: 'AddDetails',
  data () {
    return {
      detailsForm: {
        code: '',
        name: '',
        status: '1',
        type: '',
        location: [],
        province: '',
        city: '',
        area: '',
        address: '',
        surface: '',
        phone: '',
        personName: ''
      },
      wareType: EmunList.wareType,
      options: regionData,
      rules,
      loading: false
    }
  },
  created () {
    this.getCK()
  },
  computed: {
    // 处理省市区数据
    LocationsInfo () {
      return [
        CodeToText[this.detailsForm.location[0]],
        CodeToText[this.detailsForm.location[1]],
        CodeToText[this.detailsForm.location[2]]
      ].join('/')
    }
  },
  methods: {
    // 获取仓库
    async getCK () {
      this.loading = true
      if (this.$route.params.id) {
        const res = await searchWare(this.$route.params.id)
        this.detailsForm = res
        this.detailsForm.status = res.status.toString()
        // this.detailsForm.location = [res.province, res.city, res.area]
        this.$set(this.detailsForm, 'location', [res.province, res.city, res.area])
      } else {
        this.detailsForm.code = await getCK()
      }
      this.loading = false
    },
    // 提交
    async addWareHouse () {
      try {
        await this.$refs.detailsForm.validate()
        if (this.detailsForm.id) {
          await updataWare({
            ...this.detailsForm,
            location: this.LocationsInfo
          })
          this.$message.success('编辑成功')
        } else {
          await addWare({ ...this.detailsForm, location: this.LocationsInfo })
          this.$message.success('添加成功')
        }
        this.$router.push('/manageinfo/warehouse')
        this.$refs.detailsForm.resetFields()
      } catch (e) {
        console.log(e)
      }
    },
    // 选中值的时候触发
    handleChange (value) {
      this.detailsForm.province = value[0]
      this.detailsForm.city = value[1]
      this.detailsForm.area = value[2]
    }
  },
  // 销毁之前清空
  beforeDestroy () {
    this.detailsForm = {
      code: '',
      name: '',
      status: '1',
      type: '',
      location: [],
      province: '',
      city: '',
      area: '',
      address: '',
      surface: '',
      phone: '',
      personName: ''
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .penpel {
    @include penpel;
    width: 170px;
  }
  .container {
    height: 510px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    margin-top: 20px;
    margin-left: 29px;
    margin-right: 29px;
    padding-top: 31px;
    padding-bottom: 30px;
    .el-row {
      padding: 0 30px;
    }
    .labelbutton {
      text-align: center;
      .searchbutton {
        @include searchbutton;
      }
      .resetbutton {
        @include resetbutton;
        margin-right: 20px;
      }
    }
  }
  .is-disabled {
    ::v-deep .el-input__inner {
      background-color: #f3ebeb !important;
    }
  }
</style>
